<template>
    <view class="nova-column">
        <nova-pref class="li-pref" title="头像" placeholder="" :arrow="true">
            <view class="picker" @click="pickImg('headimg')">
                <image v-if="info.headimg" class="profile" :src="info.headimg"></image>
                <text class="placeholder" v-else>点击选择头像</text>
            </view>
        </nova-pref>
        <nova-pref class="li-pref" title="姓名" placeholder="请填写真实姓名" :arrow="false" type="input" name="name" :value="info.name" @input="input"></nova-pref>
        <nova-pref
            class="li-pref"
            title="性别"
            placeholder="请选择性别"
            :arrow="true"
            type="picker"
            name="sex"
            :value="sexIndex"
            :pickerRange="sexList"
            @change="change"
        ></nova-pref>
        <nova-pref
            class="li-pref"
            title="注册电话"
            placeholder="请填写注册电话"
            :arrow="false"
            type="text"
            name="phone"
            :value="info.phone"
            inputType="number"
            @input="input"
        ></nova-pref>
        <nova-pref
            class="li-pref"
            title="联系电话"
            placeholder="请填写您的联系电话"
            :arrow="false"
            type="input"
            name="contact"
            :value="info.contact"
            inputType="number"
            @input="input"
        ></nova-pref>

        <nova-pref
            class="li-pref"
            title="区域"
            placeholder="请选择所在区域"
            type="picker"
            :pickerRange="areas"
            pickerRangeKey="name"
            :value="areaIndex"
            @change="changeArea"
            :arrow="true"
        ></nova-pref>
<!--        <nova-pref
            class="li-pref"
            title="服务地址"
            placeholder="请选择所在的小区"
            :arrow="true"
            type="text"
            name="village"
            :value="info.village"
            @click.native="goMap"
        ></nova-pref> -->
        
        <choose-location class="li-pref" title="服务地址" placeholder="请选择所在的小区" :loc="loc" @change="goMap" />
        <view class="nova-column" style="padding: 0 34rpx;"><button class="save btn-primary" @click="save">保存</button></view>
    </view>
</template>

<script>
import NovaPref from '../../components/nova/pref.vue';
import conf from '../../common/conf.js';
import ChooseLocation from '../c/choose-location.vue'
export default {
    components: {
        NovaPref,
        ChooseLocation
    },
    data() {
        return {
            sexList: conf.sexlist,
            sexIndex: 0,
            areas: [],
            areaIndex: 0,
            info: {},
            loc: {
                latitude: '',
                longitude: '',
                name: '',
                address: '',
                areaid: ''
            },
            openid: this.$global.openid
        };
    },
    methods: {
        async loadData() {
            let res = await this.$request.post({
                url: '/user/userbasic',
                data: {
                    openid: this.openid,
                    type: this.$global.role
                }
            });
            this.info = res;
            let area = this.info.area_id || this.info.area;
            if (area) {
                let tempId = -1
                if (this.areas && this.areas.length > 0) {
                    this.areas.forEach((item,index)=>{
                        if (item.name === area) {
                            tempId = index
                        }
                    })
                    this.areaIndex = tempId >= 0 ? tempId : 0;
                }
            }
            if (this.info.sex) {
                this.sexIndex = this.sexList.indexOf(this.info.sex);
            }
            // #ifdef H5
            if (!this.info.village) {
                this.info.village = '北京东路63号';
                this.info.latitude = 32.050678;
                this.info.longitude = 118.792198;
            }
            // #endif
            if (res.latitude) {
                this.loc.latitude = res.latitude;
            }
            if (res.longitude) {
                this.loc.longitude = res.longitude;
            }
            if (res.village) {
                this.loc.name = res.village;
            }
            console.log(this.areaIndex, this.sexIndex);
        },
        pickImg(key) {
            var that = this;
            uni.chooseImage({
                count: 1,
                success: function(res) {
                    console.log(res);
                    let path = res.tempFilePaths[0];
                    //that.info[key] = path;
                    that.upload(key, path);
                }
            });
        },
        async upload(key, f) {
            var that = this;
            let res = await this.$request.upload({
                url: '/user/uploadPic',

                filePath: f,
                name: 'file',
                loadingTip: '上传中，请稍候',
                formData: {}
            });
            console.log(res);
            let url = res[0].url;
            console.log(key, url);
            that.info[key] = url;
            return;
        },
        goMap(res) {
            let _this = this;
            _this.info.village = res.name;
            _this.loc = {
                latitude: res.latitude,
                longitude: res.longitude,
                name: res.name,
                address: res.address
            };
            this.info.latitude = res.latitude;
            this.info.longitude = res.longitude;
        },
        change(e) {
            let name = e.target.name;
            this.sexIndex = e.detail.value;
            this.info.sex = this.sexList[this.sexIndex];
        },
        input(e) {
            let name = e.target.name;
            this.info[name] = e.detail.value;
        },
        changeArea(e) {
            this.areaIndex = e.detail.value;
            this.info.area_id = this.areas[this.areaIndex].name;
        },
        async save() {
            let err = '';
            if (!this.$isMobile(this.info.phone)) {
                err = '注册电话不是一个有效的手机号码';
            } else if (!this.$isMobile(this.info.contact)) {
                err = '联系电话不是一个有效的手机号码';
            }
            if (err) {
                this.$toast(err);
                return;
            }
            if (this.info.area_id === undefined && this.areas.length > 0) {
                this.info.area_id = this.areas[0].name;
            }
            this.info.area = this.info.area_id
            console.log('post', this.info);
            let res = await this.$request.post({
                url: '/user/information',
                data: this.info,
                loadingTip: '正在提交，请稍候...'
            });
            //this.info = res;
            this.$toast('信息保存成功');
            this.$getUserBasic();
        }
    },
    onLoad() {
        this.areas = this.$global.districts || [];
        // #ifdef H5
        this.openid = 'oUtyp5XJTdgNm8RsGRgkrlEVWD3Y';
        // #endif
        console.log(this.info.village);
        this.loadData();
    }
};
</script>

<style>
page {
    color: #999999;
}

.picker {
    width: 100%;
    text-align: right;
}

image.profile {
    width: 64rpx;
    height: 64rpx;
    border-radius: 22rpx;
    margin-right: 10rpx;
}

.title {
    line-height: 130rpx;
    color: #999999;
    font-size: 30rpx;
}

.ta {
    width: 100%;
    height: 300rpx;
    border: 1rpx solid rgba(229, 229, 229, 1);
    border-radius: 10rpx;
    padding: 22rpx 38rpx;
    font-size: 28rpx;
}

.save {
    height: 100rpx;
    line-height: 100rpx;
    margin: 64rpx 0;
}
</style>
